<template>
  <div class="home">
    <div id="nav">
      <router-link to="/home/about">About</router-link> |
      <router-link to="/home/mine">Mine</router-link>
    </div>
    <div>--------hello world---------</div>
    <hello-world :ref="setRef" :key="idx"></hello-world>
    <div>--------mine---------</div>
    <mine name="young cao">
      <template #header="slotProps">
        <div>header:{{ slotProps.type }}</div>
      </template>
      <template #footer>
        <div style="">footer</div>
      </template>
    </mine>
    <div>--------other 输入框---------</div>
    <a-input v-model:value="name" placeholder="Basic usage" />
    <a-button type="primary">按钮</a-button>
    <div>--------about---------</div>
    <About></About>
    <div>--------component---------</div>
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </div>
</template>

<script lang="ts">
  import HelloWorld from '@/components/HelloWorld.vue'
  import Mine from './Mine'
  import About from './About.vue'
  import {
    defineComponent,
    h,
    reactive,
    getCurrentInstance,
    onMounted,
    onUnmounted,
    toRefs
  } from 'vue'
  import { useLockStore } from '@/store/modules/lock'
  import { Input, Button } from 'ant-design-vue'

  export default defineComponent({
    components: {
      HelloWorld,
      Mine,
      About,
      [Input.name]: Input,
      [Button.name]: Button
    },
    setup() {
      const state = reactive({
        name: 'young',
        age: 18,
        idx: 0,
        color: '#FFF'
      })

      const instance = getCurrentInstance()
      console.log(instance?.appContext.config.globalProperties)
      console.log(instance)

      const { lockInfo } = useLockStore()
      console.log(lockInfo?.pwd)

      // const content = ref()
      const setRef = (el: any) => {
        if (el) {
          console.log('ref:', el.count)
          // console.log('ref:', el.getName('cat', 'dog'))
        }
      }

      // watchEffect(() => {
      //   // 这个副作用在 DOM 更新之前运行，因此，模板引用还没有持有对元素的引用。
      //   console.log(content.value) // => null
      //   console.log(content.value.getName('young', 'cao'))
      // }, {
      //   flush: 'post'
      // })

      onMounted(() => {
        console.log('Component is mounted!')
        setTimeout(() => {
          state.idx += 1
        }, 3000)
      })
      onUnmounted(() => {
        console.log('onUnmounted')
      })

      return {
        ...toRefs(state),
        setRef
      }
    },
    render() {
      return h('div', {}, ['测试', this.name])
    }
  })
</script>

<style lang="scss" scoped>
  .title {
    color: $themeColor;
    background-color: $background-color;
  }

  .home {
    //background-color: v-bind('color');
  }
</style>
